
<template>
  <div class="upload-list">
    <van-uploader
      v-model="result"
      :after-read="afterRead"
      :before-delete="beforeDelete"
      multiple
      accept="image/*"
      :max-count="5"
    >
      <font-awesome-icon
        class="btn-icon"
        v-show="plusFlag"
        :icon="['fa', 'camera']"
    /></van-uploader>
  </div>
</template>
  <script>

export default {
  name: "mobileUpload",
  props: {
    // 对话框标题
    title: {
      type: String,
      default: "移动端基础上传组件",
    },
    value: {
      type: [Array],
      default: () => [],
    },
  },
  data() {
    return {
      hide: false,
      result: [],
    };
  },
  created() {},
  watch: {
    value(val) {
      this.result = JSON.parse(JSON.stringify(val));
    },
  },
  methods: {
    beforeRead(file) {
      this.$emit("beforeRead", file);
    },
    afterRead(res) {
      res.status = "uploading";
      res.message = "上传中...";
      let file = res.file;
      //处理压缩文件
      let fileType = file.type.split("/");
      this.uploadFile(file.name, rst.formData, res);
    },
    /***
     * 上传后台
     */
    async uploadFile(fileName, formData, files) {
      this.hide = true;
      this.$post("h5/file/upload?fileName=" + fileName, formData).then(
        (res) => {
          this.hide = false;
          if (res.code == "Success") {
            res.url = this.getOssfileUrl(res.filePath);
            this.$emit("afterRead", res);
          } else {
            files.status = "failed";
            files.message = "上传失败";
          }
        }
      );
    },
    getOssfileUrl(filePath) {
      let codeId = sessionStorage.getItem("codeToken");
      let token = "";
      return `/fasthr/h5/file/downLoadGet?filePath=${filePath}&code=${codeId}&token=${token}`;
    },
    beforeDelete(file, detail) {
      this.$emit("beforeDelete", detail.index);
    },
  },
};
</script>
  